<template>
  <div id="app-container">
    <mt-header  fixed title="H ellowMyChicken">
      <span @click="goback()" v-show="myflag" slot="left">
        <mt-button icon="back">返回</mt-button>
      </span>
    </mt-header>
    <transition >
      <router-view></router-view>
    </transition>
    <footer>
      <nav class="mui-bar mui-bar-tab">
        <router-link class="mui-tab-item" to="/home">
          <span class="mui-icon mui-icon-home"></span>
          <span class="mui-tab-label">首页</span>
        </router-link>
        <router-link class="mui-tab-item" to="/member">
          <span class="mui-icon mui-icon-contact"></span>
          <span class="mui-tab-label">会员</span>
        </router-link>
        <router-link class="mui-tab-item" to="/shopcart">
          <span class="mui-icon mui-icon-extra mui-icon-extra-cart"><span id="flag" class="mui-badge">{{cartCount}}</span></span>
          <span class="mui-tab-label">购物车</span>
        </router-link>
        <router-link class="mui-tab-item" to="/search">
          <span class="mui-icon mui-icon-search"></span>
          <span class="mui-tab-label">搜索</span>
        </router-link>
      </nav>
    </footer>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'App',
  data () {
    return {
      myflag: true,
      test: 1
    }
  },
  methods: {
    goback () {
      console.log(this.myflag)
      this.$router.back()
    }
  },
  watch: {
    '$route.path': function (newVal) {
      if (newVal === '/home') {
        this.myflag = false
      } else {
        this.myflag = true
      }
    }
  },
  computed: {
    ...mapGetters([
      'cartCount'
    ])
  }
}
</script>

<style>
html{
  font-size: 750px;
}
a{
  color:#888;
}
#app-container {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 40px;
  overflow-x: hidden;
  margin-bottom: 50.29px;
}
ul,li{
  margin:0;
  padding:0;
}
.v-enter{
  opacity: 0;
  transform: translateX(100%)
}
.v-enter-active,.v-leave-active{
  transition: all .4s ;
}
.v-leave-to{
  opacity: 0;
  transform: translateX(-100%);
  position: absolute;
}
</style>
